<script setup lang="ts">
import myTopic from "@/composables/myTopic.ts";
import errorsStore from "@/piniaStore/errorsStore.ts";
const router = useRouter();
const route = useRoute();
const t_id = route.params?.t_id;

const {getTopicDetail,topicDetail,editTopic,getCats,cats} = myTopic();
await getTopicDetail(t_id)
await getCats();
const edit = async ()=>{
 const res =  await editTopic(topicDetail.value);
  router.push({name:'front.topic.show',params:{t_id:res.data.id}})
}

const clearError = (name:string)=>{
  errorsStore().clearError(name)
}
</script>

<template>
<main class="topicAdd" v-if="topicDetail">
  {{topicDetail}}
  <el-card>
    <template #header>
      <div class="title">
        <icon-editor-picture theme="outline" size="24" fill="#7ed321"/>
        <span>编辑帖子</span>
      </div>
    </template>
    <el-form  label-width="120px" v-if="cats">
      <el-form-item label="选择所属大类">
        <el-select v-model="topicDetail.cat_id" @change="clearError('cat_id')" placeholder="下拉选择大类">
          <el-option
              :label="cat.title"
              :value="cat.id"
              :selected="cat.id == topicDetail.cat.id"
              v-for="(cat,index) in cats" :key="index"
          />
        </el-select>
        <my-error name="cat_id" />
      </el-form-item>
      <el-form-item label="帖子标题">
        <el-input v-model="topicDetail.title" @focus="clearError('title')"/>
        <my-error name="title" />
      </el-form-item>
      <el-form-item label="帖子内容">
        <markdown-editor v-model="topicDetail.content" />
        <my-error name="content" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="edit">确认</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</main>
</template>

<style lang="scss" scoped>
main.topicAdd{
  @apply min-h-screen p-3;
  div.title{
    @apply flex gap-1 items-center;
    span{
      @apply text-slate-600;
    }
  }
}
</style>